<template>
    <div
        style="background-color: rgb(241, 241, 241);padding:5px;padding-right: 7px;min-height: 100vh; box-sizing: border-box;">
        <van-nav-bar title="种草文章" left-text="返回" left-arrow fixed @click-left="$router.push('/home')">
            <template #right>
                <van-icon name="add-o" size="18" @click="$router.push('/add-article')" />
            </template>
        </van-nav-bar>
        <div style="height: 50px;"></div>
        <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad"
            style="padding-bottom: 50px;">
            <div v-for="item in list" style="background-color: #fff;
            padding: 10px 16px;margin-bottom: 10px; border-radius: 10px;display: flex;"
                @click="$router.push(`/article-detail/${item.id}`)">
                <img :src="item.pic_url" alt="" style="width: 70px;height: 90px;">
                <div
                    style="margin-left: 15px;display: flex; flex-direction: column;justify-content:space-between;width: 235px;">
                    <div style="margin-top: 5px;">
                        <h6 style="font-weight: bold;color: #333;">{{ item.title }}</h6>
                        <p style="color: #666;font-size: 14px;margin-top: 8px;">{{ item.detail }}</p>
                    </div>
                    <p style="color: #666;font-size: 14px;display: flex;justify-content: space-between;margin-bottom: 5px;">
                        <span>{{ item.desc }}</span>
                        <span>{{ item.created_at }}</span>
                    </p>
                </div>
            </div>
        </van-list>
        <!-- 回到顶部 -->
        <van-back-top right="10vw" bottom="10vh" style="background-color: #1BAEAE;"/>

    </div>
</template>

<script setup>
import { ref } from 'vue'
import { getArticleList } from '../../api';
const list = ref([]);
const loading = ref(false);
const finished = ref(false);

let page = 1
let limit = 10
let count = 0 //文章的数量
const onLoad = () => {
    // 异步更新数据
    getArticleList({ page: page++, limit }).then(res => {
        if (res.code == 1) {
            if (res.data.list) {
                list.value.push(...res.data.list)
                count = res.data.count
                //  console.log(res)
                loading.value = false
                 if (page > Math.ceil(count / limit)) {
            // console.log(count)
                finished.value = true

        }
            }
        }
    })
};


</script>

<style scoped>
:deep() .van-nav-bar .van-icon {
    color: #0c9595;
    font-weight: bolder;
}

:deep() .van-nav-bar .van-nav-bar__text {
    color: #1BAEAE;
    font-weight: bolder;
}
</style>